<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
    <title>Examples</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"/>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link href="css/folder.css" rel="stylesheet"/>

</head>
<body class="container">
<div class="row">
    <header class="col-md-2 header hide">
        <img class="avater" src="http://img.mukewang.com/55b47a7c0001f8b616000900-200-200.jpg" alt=""/>
        <div class="folder-menu">
            <ul>
                <li>folder</li>
                <li>folder</li>
                <li>folder</li>
                <li>folder</li>
                <li>folder</li>
                <li>folder</li>
            </ul>
        </div>
    </header>
    <div class="col-md-12 main" id="app">
        <div class="nav">
            <i class="glyphicon glyphicon-home"></i>&nbsp;当前文件夹名称：{{name}}

            <button type="button" class=" pull-right btn btn-xs btn-info" v-on:click="change"><i class="glyphicon glyphicon-pencil"></i>编辑</button>
        </div>
        <i-progress :progress="progress"></i-progress>
        <folder :folder-set="folderSet" :site-set="siteSet"></folder>
    </div>
</div>

<template id="progress">
    <div class="progress" style="height:10px;margin:0px;height:6px;">
        <div class="progress-bar progress-bar-striped active" :style="'width:'+progress">
        </div>
    </div>
</template>

<template id="folder">
    <div class="folder">
        <ul>
            <!--文件夹-->
            <li v-for="folder in folderSet">
                <a  :href="'#folder/'+folder.fullPath" style="text-decoration: none;" data-toggle="tooltip"
                   :title="folder.description">
                    <img src="img/file (1).png" width="50px" style="display: block;"/>
                    <span style="display: block; text-overflow: ellipsis;width: 80px; overflow: hidden;">{{folder.name}}</span>
                </a>
            </li>
            <!--网站-->
            <li v-for="site in siteSet">
                <a :href="site.url" style="text-decoration: none;" data-toggle="tooltip" :title="site.title">
                    <img :src="site.icon" width="50px" style="display: block;"/>
                    <span style="display: block; text-overflow: ellipsis;width: 80px; height: 20px; overflow: hidden;">{{site.title}}</span>
                </a>
            </li>
        </ul>
    </div>

</template>

<script>$(function () {
    $("[data-toggle='tooltip']").tooltip();
});</script>
<script src="https://cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>

<script>
    Vue.component('folder', {
        template: '#folder',
        props: {
            folderSet: Array,
            siteSet: Array
        }
    })
    Vue.component('i-progress', {
        template: '#progress',
        props: {
            progress: String
        }
    })
</script>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
<script
        src="https://rawgit.com/flatiron/director/master/build/director.min.js">
</script>

<script>
    function getPath(path) {
        var num = path.lastIndexOf("/");
        if (num > 0) {
            if (num + 1 == path.length) {
                return getPath(path.substr(0, path.length - 1));
            } else {
                return path.substr(num + 1, path.length);
            }
        } else {
            return path;
        }
    }
    var routes = {
        '/folder/?((\w|.)*)': function (path) {
            var folderId = getPath(path);
//            vue_app.progress();
            getFolderById(vue_app, folderId);
        }
    };
    var router = Router(routes);

    router.init();
</script>
</body>
</html>